<template>
  <div class="user">
    <!-- 头部 -->
    <hm-header>个人中心</hm-header>
    <!-- 个人信息 -->
    <div class="info">
      <!-- 左 -->
      <div class="left">
        <img :src="$axios.defaults.baseURL + info.head_img" alt />
      </div>
      <!-- 中 -->
      <div class="center">
        <div class="name">
          <i v-if="info.gender == 1" class="iconfont iconxingbienan"></i>
          <i v-else class="iconfont iconxingbienv"></i>
          <span>{{ info.nickname }}</span>
        </div>
        <div class="time">{{ info.create_date | date_filter }}</div>
      </div>
      <!-- 右 -->
      <div class="right">
        <i class="iconfont iconjiantou1"></i>
      </div>
    </div>

    <!--  列表 -->
    <hm-navbar title="我的关注" content="关注的用户"></hm-navbar>
    <hm-navbar title="我的跟帖" content="跟帖/回复"></hm-navbar>
    <hm-navbar title="我的收藏" content="文档/视频"></hm-navbar>
    <hm-navbar title="设置" @click="$router.push('/edit')"></hm-navbar>
    <hm-navbar title="退出" @click="logout"></hm-navbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {}
    }
  },
  created() {
    // 发送请求，获取个人详细信息
    // 必须在发请求的时候，携带token
    // token需要通过一个请求头：Authorization
    const user_id = localStorage.getItem('user_id')
    const token = localStorage.getItem('token')

    // 用户详情
    this.$axios
      .get(`/user/${user_id}`, {
        headers: {
          Authorization: token
        }
      })
      .then(res => {
        console.log(res)
        const { statusCode, data } = res.data
        if (statusCode === 200) {
          this.info = data
          console.log(this.info)
        }
      })
  },
  methods: {
    logout() {
      this.$dialog
        .confirm({
          title: '温馨提示',
          message: '你确定要退出本系统吗?'
        })
        .then(() => {
          // on confirm
          // console.log('点击确定')
          localStorage.removeItem('token')
          localStorage.removeItem('user_id')

          this.$router.push('/login')
          this.$toast.success('退出成功')
        })
        .catch(() => {
          // on cancel
          // console.log('点击取消')
          this.$toast.success('取消推出')
        })
    }
  }
}
</script>

<style lang="less" scoped>
.user {
  .info {
    display: flex;
    height: 100px;
    border-bottom: 3px solid #ccc;
    align-items: center;
    padding: 0 20px;

    .left {
      width: 70px;
      margin-right: 20px;
      img {
        width: 70px;
        height: 70px;
        display: block;
        border-radius: 50%;
      }
    }
    .center {
      flex: 1;
      // background: red;
      height: 50px;
      line-height: 25px;
    }

    .right {
      width: 30px;
      // background: pink;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
